<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <style type="text/css"></style>
<!-- CSS:写前端，如果不是专业的，那就用框架，我们这个项目用了：easyUI框架，其他框架还有：bootstrap -->
    <link rel="stylesheet" href="login_style/css/supersized.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./login_style//css/admin.css">
    <link rel="stylesheet" href="./login_style/css/login.css">


    <style>
        .booder{
            font-weight: 600 !important;
            color: black !important;
        }
        .booders{
            font-weight: 500 !important;
            color: #029789!important ;
        }
        body{
            font-size: 16px;
            font-weight: bold;
        }
    </style>
    
    
</head>
<body>

    <div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="z-index: 2; ">

        <div class="layadmin-user-login-main" style="border: #e2e2e2 solid 1px; background-color: #e2e2e2 ; opacity: 0.8">
          <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2>Admin</h2>
            <p class="booder">后台管理系统</p>
          </div>
          <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
            <div class="layui-form-item">
              <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
              <input type="text"  id= "username" name="username" id="LAY-user-login-username" lay-verify="required" placeholder="用户名" class="layui-input">
            </div>
            <div class="layui-form-item">
              <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
              <input type="password"  id= "password" name="password" id="LAY-user-login-password" lay-verify="required" placeholder="密码" class="layui-input">
            </div>
            <div class="layui-form-item">
              <div class="layui-row">
                <div class="layui-col-xs7">
                  <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-vercode"></label>                                                                        
                  <input type="text" id="vercode" name="vercode" id="LAY-user-login-vercode" lay-verify="required" placeholder="图形验证码" class="layui-input">
                </div>
                <div class="layui-col-xs5">
                  <div style="margin-left: 10px;">
                    <img src="/Checkcode" class="layadmin-user-login-codeimg" id="LAY-user-get-vercode">
                  </div>
                </div>
              </div>
            </div>
            <div class="layui-form-item" style="margin-bottom: 20px;">
              <input type="checkbox" name="remember" lay-skin="primary" title="记住密码"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>记住密码</span><i class="layui-icon layui-icon-ok"></i></div>
              <a href="forget.html" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘记密码？</a>
            </div>
            <div class="layui-form-item" id="login">
              <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="LAY-user-login-submit">登 入</button>
            </div>
            <div class="layui-trans layui-form-item layadmin-user-login-other">
              <label class="booders">社交账号登入</label>
              <a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>
              <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>
              <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>
              
              <a href="reg.html" class="layadmin-user-jump-change layadmin-link booders">注册帐号</a>
            </div>
          </div>
        </div>
        
        <div class="layui-trans layadmin-user-login-footer" style="font-weight: 800 !important; color: #0C0C0C">
          
          <p>© 2018 <a href="http://www.layui.com/" target="_blank">邑大人事管理系统</a></p>
        </div>
        
        
      </div>

<!-- Javascript -->
    <script src="login_style/js/jquery-1.8.2.min.js"></script>
	<script src="login_style/js/supersized.3.2.7.min.js"></script>
    <script src="login_style/js/supersized-init.js"></script>
    <script src="./layui/layui.js"></script>
    
    
    <script>
        //一般直接写在一个js文件中
        layui.use(['layer', 'form'],function(){
          var layer = layui.layer
          ,form = layui.form;
        });
       </script>
<style id="LAY_layadmin_theme">
.layui-side-menu,.layadmin-pagetabs .layui-tab-title li:after,.layadmin-pagetabs .layui-tab-title li.layui-this:after,.layui-layer-admin .layui-layer-title,.layadmin-side-shrink .layui-side-menu .layui-nav>.layui-nav-item>.layui-nav-child{background-color:#20222A !important;}.layui-nav-tree .layui-this,.layui-nav-tree .layui-this>a,.layui-nav-tree .layui-nav-child dd.layui-this,.layui-nav-tree .layui-nav-child dd.layui-this a{background-color:#009688 !important;}.layui-layout-admin .layui-logo{background-color:#20222A !important;}
</style>

    <script>
       var img =  document.getElementById("LAY-user-get-vercode");

       img.onclick = function (ev) {
           console.log("11");
           var src  = "/Checkcode?" + Date.now();
           console.log(src);
           img.src = src ;
       }

    </script>


 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    document.getElementById("login").addEventListener('click', function (ev) {

        var username = document.getElementById('username').value

        var password = document.getElementById('password').value

        var vercode = document.getElementById('vercode').value ;

      // img.src = "/Checkcode?" + Date.now();

        console.log(username + "   "  + password);

        axios.post('/login', {
            username:  username,
            password:  password ,
            vercode : vercode
        }).then(function (response) {

                if(response.data.status === 0){

                    window.location.href  = "/main.html";

                    alert(response.data.data);

                }else if(response.data.status === 1){

                    alert(response.data.data);


                }
            })
            .catch(function (error) {
                console.log(error);
            });




    })
</script>


</body>
</html>
